jclass={
    initPage:function(){
        // 绑定dom对象
        this.obj = {
            searchText:$('#searchText'),
        };
        // 声明全局变量
        this.data = {
            datatable:[],
            tableParams: {
                areaId: '',
                vehicleNo: '',
                startTime: '',
                endTime: '',
                status: '',
                applicationResult: '',
                recordingStatus: '',
                page:1,
                size:10
            },
            tableRowSelectList: [],
            map: {},
            infoWindow: {},
            tableRecordStatus:['已取消','交换中','异常断开'],
            tableRecordappResult: ['申请成功','申请失败'],
            tableRecordlxStatus: ['成功','失败','不支持','回话结束','失效口令错误','不满足跨域条件']
        };
        this.selectedValue();
        this.getTableList();
        // this.creatTable();
        this.init();
        this.bindEvent();
    },
    init() {
        //十分年月日范围
        let that =this
        $('#datepickerTime').datePicker({
            format: 'YYYY-MM-DD HH:mm',
            isRange: true,
            hide: function (type) {
                // console.info(this.$input.eq(0).val(), this.$input.eq(1).val());
                that.data.tableParams.startTime = this.$input.eq(0).val()
                that.data.tableParams.endTime = this.$input.eq(1).val()
            }
        });
        $('#datepickerTime_dialog').datePicker({
            format: 'YYYY-MM-DD HH:mm',
            isRange: true,
            hide: function (type) {
                // console.info(this.$input.eq(0).val(), this.$input.eq(1).val());
                that.data.tableParams.startTime = this.$input.eq(0).val()
                that.data.tableParams.handleEndTime = this.$input.eq(1).val()
            }
        });


        $("select").prop("selectedIndex",0)
         $("select").find("option").each(function() {
            $(this).removeAttr("selected");
        });

          // 表格操作 选择，取消选择，选择全部，取消选择全部
        $("#jtable_exchangeVehicle").on('check.bs.table',(e,row,$element) => {
            this.data.tableRowSelectList.push(row)
        })
        $("#jtable_exchangeVehicle").on('uncheck.bs.table',(e,row,$element) => {
            this.data.tableRowSelectList = this.data.tableRowSelectList.filter(item => row.id != item.id)
        })
        $("#jtable_exchangeVehicle").on('check-all.bs.table',() => {
            this.data.tableRowSelectList = this.data.datatable
        })
        $("#jtable_exchangeVehicle").on('uncheck-all.bs.table',() => {
            this.data.tableRowSelectList = []
        })

        this.diquSelceted();
        this.mapInit();
    },
    mapInit() {
        let that = this;
        this.data.map = new AMap.Map('jDdraw_map', {
            resizeEnable: true,
            zoom: 13,
            center: [116.473188,39.993253],
            mapStyle:'amap://styles/darkblue',

        });
        var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
        var marker = new AMap.Marker({
            position: [116.473188,39.993253],
            map:that.data.map
        });
        marker.content=`<div class="infos-window">
                            <p>车牌号：陕5984o</p>
                            <p>车牌颜色：黄</p>
                            <p>行业类别：班线客运</p>
                            <p>经度：116.874638</p>
                            <p>纬度：22.9044</p>
                            <p>速度：72km/h</p>
                            <p>方向：东偏南11度</p>
                            <p>位置：上东升的反馈货到付款地方</p>
                        </div>`;

        marker.on("click",function(e){
            infoWindow.setContent(e.target.content);
            infoWindow.open(that.data.map, e.target.getPosition());
        })
    },
    // addMarker() {
    //     marker = new AMap.Marker({
    //         position: [116.473188,39.993253]
    //     });
    //     marker.setMap(this.data.map);
    //     marker.on("click",(e) => {
    //         var infohtml = `<div class="infos-window">
    //                         <p>车牌号：陕5984o</p>
    //                         <p>车牌颜色：黄</p>
    //                         <p>行业类别：班线客运</p>
    //                         <p>经度：116.874638</p>
    //                         <p>纬度：22.9044</p>
    //                         <p>速度：72km/h</p>
    //                         <p>方向：东偏南11度</p>
    //                         <p>位置：上东升的反馈货到付款地方</p>
    //                     </div>`;
    //         this.data.infoWindow.open(this.data.map, e.target.getPosition());
    //     })
    // },
    // openInfo(e) {
    //     //构建信息窗体中显示的内容
    //     var infohtml = `<div class="infos-window">
    //                         <p>车牌号：陕5984o</p>
    //                         <p>车牌颜色：黄</p>
    //                         <p>行业类别：班线客运</p>
    //                         <p>经度：116.874638</p>
    //                         <p>纬度：22.9044</p>
    //                         <p>速度：72km/h</p>
    //                         <p>方向：东偏南11度</p>
    //                         <p>位置：上东升的反馈货到付款地方</p>
    //                     </div>`;
    //     this.data.infoWindow.open(this.data.map, e.target.getPosition());
    //     // this.data.infoWindow = new AMap.InfoWindow({
    //     //     center:[116.473188,39.993253],
    //     //     offset: new AMap.Pixel(0, -30),
    //     //     anchor: 'bottom-left',
    //     //     content: infohtml
    //     // });
    //
    //
    //     //this.data.infoWindow.open(this.data.map, this.data.map.getCenter());
    // },
    bindEvent() {

        $("#resetClick").click(() => {
            $('.ju-select input').val("全部")
            $("select").prop("selectedIndex",0)
            $("#search_input_vehicleno").val("")
            $(".item.rtable_input").find("input").val("")
            $("#datepickerTime input").val("")

            this.data.tableParams = {
                areaId: '',
                vehicleNo: '',
                startTime: '',
                endTime: '',
                status: '',
                applicationResult: '',
                recordingStatus: '',
                page:1,
                size:10
            }
        })
        $("#searchClick").click(() => {
            this.getTableList()
        })

        $("#btn_change_vehicle").click(() => {
            console.log(this.data.tableRowSelectList)
            if (this.data.tableRowSelectList && this.data.tableRowSelectList.length) {
                // 打开车辆地图信息弹框
                openDialog()
               // this.addMarker()
            } else {
                JPop.alert({msg:"请至少选择一辆车。"})
            }
        })
    },
    selectedValue:function(){
        let optionArr=[{name:"全部",val:'-1'},{name:"已取消",val:'0'},{name:"交换中",val:'1'},{name:"异常断开",val:'2'}];
        this.creatId("#status",optionArr);
    },
    creatId:function(id,optionArr){
        $(id).html();
        var str="";
        $.each(optionArr,function (i) {
            str+="<option value='"+optionArr[i].val+"'>"+optionArr[i].name+"</option>"
        });
        $(id).html(str);
        $(id).comboSelect();
    },
    /**
     * 请求地区数据
     * */
    diquSelceted: function() {
        jrequest.get("/api/assessMent/selectByArea",{}).then(res => {
            let data = res.data
            data[0].code = 1;
            $.each(data[0].cityAreaVOS, function(i, dom) {
                data[0].cityAreaVOS[i].code = 2;
                $.each(data[0].cityAreaVOS[i].cityAreaVOS, function(j, dom) {
                    data[0].cityAreaVOS[i].cityAreaVOS[j].code = 3;
                })
            })
            this.creatMainRido("exchange_cqrm_main", data, "cityAreaVOS", "code");
        })
    },
    /**
     * 下拉框
     * */
    creatMainRido: function(id, attr, child, jibie) {
        $(id).html("");
        var sttrdiv = "";
        for(var i = 0; i < 3; i++) {
            sttrdiv += "<div class='qrm-border" + (i + 1) + "' style='display:none'>" +
                "<ul class='qrm-lev-" + (i + 1) + " qrm-lev' id='qrm-border1'>" +
                "</ul>" +
                "</div>"
        };
        $(".qrm-main").html(sttrdiv);
        var str = "";
        $("#qrm-border1").html("");
        var forTree = function(o) {
            for(var i = 0; i < o.length; i++) {
                var urlstr = "";
                try {
                    urlstr = "<li><span data-id='" + o[i]["id"] + "'>" + o[i]["name"] + "</span><i class='qrm-arrow-right'></i><ul class='li-zi-" + o[i][jibie] + "' style='display: none'>";
                    str += urlstr;
                    if(o[i][child] != null) {
                        forTree(o[i][child]);
                    }
                    str += "</ul>";
                } catch(e) {}
            }
            return str;
        };
        $("#qrm-border1").html(forTree(attr));
    },
    getTableList() {
        $("#jid_loading").show()
        this.data.tableParams.status = $("#status option:selected").val() == '-1' ? '' : $("#status option:selected").val()
        this.data.tableParams.vehicleNo = $("#search_input_vehicleno").val()
        if ($(".item.rtable_input").find("input").val()) this.data.tableParams.areaId = $(".item.rtable_input").find("input").attr("data-id")
        else this.data.tableParams.areaId = ''
        jrequest.get("/api/exchange_vehicle",this.data.tableParams).then(res => {
            res.data.forEach(item => {
                item.statusName = this.data.tableRecordStatus[Number(item.status)]
                item.applicationResultName = this.data.tableRecordappResult[Number(item.applicationResult)]
                item.recordingStatusName = this.data.tableRecordlxStatus[Number(item.recordingStatus)]
            })
            this.data.datatable = res.data
            $("#jtable_exchangeVehicle").bootstrapTable('destroy');
            this.creatTable(res)
            $("#jid_loading").hide()
            // $("#jtable_exchangeVehicle").bootstrapTable('load',res.data);
        })
    },
    tableEvent:function(id,data,columns,paginationShow,total){
        data.forEach(item => {
            item.Button = this.operateFormatter()
        })
        let that = this
        $('#' + id).bootstrapTable({
            method: 'get',
            cache: false,
            height: 320,
            pagination: paginationShow,
            pageSize: that.data.tableParams.size,
            pageNumber:that.data.tableParams.page,
            showColumns: true,
            striped: true,
            columns: columns,
            sidePagination: 'server', // client or server
            totalRows: total,
            data :data,
            onPageChange: function (size, number) {
                console.log(number)
                that.data.tableParams.page = number
                that.data.tableParams.size = size
                that.getTableList()
            },
            formatNoMatches: function(){
                return '暂无数据';
            }
        });
    },
    creatTable:function(res){
        var self=this;
        var columnsOne = [
            {
                title : '序号',
                align: "center",
                formatter: function (value, row, index) {
                    //获取每页显示的数量
                    var pageSize=self.data.tableParams.size;
                    //获取当前是第几页
                    var pageNumber=self.data.tableParams.page;
                    //返回序号，注意index是从0开始的，所以要加上1
                    return pageSize * (pageNumber - 1) + index + 1;
                }
            },
            {   field : 'checked',
                checkbox: true,
                width: "60"
            },
            {
              field: "areaName",
              title: "地区"
            },
            {
              field: "vehicleNo",
              title: "车牌号码"
            },
            {
              field: "vehicleColor",
              title: "车牌颜色"
            },
            {
              field: "startTime",
              title: "开始时间"
            },
            {
              field: "endTime",
              title: "结束时间"
            },
            {
              field: "statusName",
              title: "状态"
            },
            {
              field: "applicationResultName",
              title: "申请结果"
            },
            {
              field: "recordingStatusName",
              title: "录像回放申请状态"
            },
            {
                field: 'Button',
                title: '操作',
                width: "240",
                align: 'center',
                events: operateEvents,
            }
        ];
        self.tableEvent("jtable_exchangeVehicle",res.data,columnsOne,true,res.total);
    },
    operateFormatter() {
        return [
            '<button type="button" id="table_edit">申请录像回放</button>',
            '<button type="button" id="table_close">取消申请</button>'
        ].join('');

    }
}


$(function(){
    jclass.initPage();

    // 表格操作按钮
    window.operateEvents = {
        'click #table_edit': (e,value,row,index) => {
            // console.log(row)
            $("#video_replay_dialog").show()
        },
        'click #table_close': (e,value,row,index) => {
            // console.log(row)

        }
    }
});

function openDialog() {
    $("#change_vehicle_dialog").show()
}

function closeDialog() {
    $("#change_vehicle_dialog").hide()
}

function closeVideoReplayDialog() {
    $("#video_replay_dialog").hide()
}













